<template>
  <div class="app">
    <div
      v-for="(item, idx) in historyTitleList"
      class="keyListRoot click_trans"
      :class="getlistDeleteCSS(item.key)"
      @animationend="$emit('deleteTitleClick', item.key)"
      @click="$emit('selectTitleClick', item.key)"
    >
    <img src="@/assets/line.svg"  :class="getLineCSS(item.key)"/>
      <div class="keyList" :key="item.key" >
        {{ item.title }}
      </div>
      <!-- 删除图标 -->
      <img
        src="@/assets/delete.svg"
        @click="deleteIconClick(item.key)"
        :class="getDeleteCSS(item.key)"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from "vue";
let props = defineProps(["historyTitleList", "lastKey"]);
let emits = defineEmits(["deleteTitleClick", "selectTitleClick"]);
let deleteKey = ref("");

/* ---------------------------------- CSS：对话行 --------------------------------- */
function getLineCSS(key) {
  return reactive({
    line: true,
    Show: props.lastKey == key,
  });
}


function getDeleteCSS(key) {
    return reactive({
        deleteIcon: true,
        deleteIconActivate: props.lastKey == key,
    });
}

/*--------- 删除动画  ---------*/
function getlistDeleteCSS(key) {
  return reactive({
    emitDelete: deleteKey.value == key,
  });
}
function deleteIconClick(key) {
    if (props.lastKey == key) {
        deleteKey.value = key;
    }
}
/*--------- 加载列表  ---------*/
onMounted(() => {
});
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
  padding-top: 8%;
  user-select: none;
}
.keyListRoot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.keyList {
  color: white;
  padding-right: 1%;
  padding-top: 5%;
  padding-bottom: 5%;
  font-family: "Times New Roman", Times, serif;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: scale(0.95);
}
.keyListRoot:hover {
  background-color: #838292;
  cursor: pointer;
  transform: scale(1);
}
.deleteIcon {
  width: 20px;
  height: 20px;
  margin-right: 5%;
  transform: scale(1);
  opacity: 0;
}
/* .deleteIconActivate{
} */
.deleteIcon:hover {
  transform: scale(1.2);
}
.keyListRoot:hover > .deleteIconActivate {
  opacity: 1;
}
.line{
    height: 30px;
    opacity: 0;
}
.Show{
    opacity: 1;
}
.emitDelete {
  animation: delete 0.6s linear;
  animation-fill-mode: forwards;
}
@keyframes delete {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.click_trans {
  transform: scale(1);
}

.click_trans:hover {
  cursor: pointer;
}

.click_trans:active {
  transform: scale(0.98);
}


</style>
